<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>🎈</p>

    <script>
        let p = document.querySelector("p");
        let size;
        function setSize(newSize) {
            size = newSize;
            p.style.fontSize = size + "px";
        }
        setSize(20);

        function handleArrow(event) {
            if (event.key == "ArrowUp") {
                if (size > 70) {
                    p.textContent = "💥";
                    document.body.removeEventListener("keydown", handleArrow);
                } else {
                    setSize(size * 1.1);
                    event.preventDefault();
                }
            } else if (event.key == "ArrowDown") {
                setSize(size * 0.9);
                event.preventDefault();
            }
        }
        document.body.addEventListener("keydown", handleArrow);
    </script>
</body>

</html>